<template>
  <Card>
    <div slot="title">
      <Button type="success">添加</Button>
    </div>

    <Table :data="listData" type="index" :columns="listColumns" stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="current" @on-change="changePage"></Page>
      </div>
    </div>
  </Card>
</template>

<script>
  export default {
    name: "sells",
    data() {
      return {
        limit: 0,
        page: 0,
        current: 1,
        total: 100,
        listData: [],
        listColumns: [
          {
            title: "订单号",
            key: "sellNo",
            width: 150
          },
          {
            title: "类型",
            key: "type",
            width: 100,
            render: (h, params) => {
              let type = params.row.itemType? '纪念品':'门票';
              return h('div', type)
            }
          },
          {
            title: "客户",
            key: "nickname",
          },
          {
            title: "标题",
            key: "title"
          },
          {
            title: "总价",
            key: "total",
          },
          {
            title: "支付方式",
            key: "payType",
          },
          {
            title: "状态",
            key: "status",
            width: 160,
            render: (h, params) => {
              let status = params.row.status;
              let pay_status = '';
              switch (status) {
                case 0: pay_status = '未支付'; break;
                case 1: pay_status = '未发货'; break;
                case 2: pay_status = '已发货'; break;
                case 3: pay_status = '已收货'; break;
              }
              return h('div', pay_status)
            }
          },
          {
            title: "最新修改",
            key: "updatedOn",
            render: (h, params) => {
              return h('div', new Date(params.row.updatedOn * 1000).toLocaleString())
            }
          },
          {
            title: "操作",
            key: "action",
            width: 200,
            align: "center",
            render: (h, params) => {
              let status = params.row.status;
              return h("div", [
                h("Button",
                  {
                    props: {
                      type: "warning",
                      size: "small",
                      disabled: status === 2
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.row.id);
                      }
                    }
                  },
                  "发货"
                ),
                h("Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.row.id);
                      }
                    }
                  },
                  "查看"
                ),
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      width: 200,
                      title: "您确认删除这条内容吗？"
                    },
                    on: {
                      'on-ok': () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  [h("Button", {
                    props: {
                      icon: "trash-a",
                      type: "error",
                      size: "small"
                    }
                  },"删除")]
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.limit = 10;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.mockListData(1);
      },
      mockListData(init) {
        this.$axios({
          method: 'get',
          url: '/api/purchase',
          params: {
            page: this.page,
            limit: this.limit,
            init: init,
          }
        }).then((res) => {
          this.total = res.data.request.total;
          this.listData = res.data.result;
          this.$Notice.success({
            title: '保存成功!'
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '保存失败!'
          });
          console.log(error);
        });
      },
      show(itemId) {
        this.$router.push({
          path: `concert/${itemId}`
        });
      },
      remove(item) {
        console.log(item)
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData(1);
      }
    },
    mounted() {
      this.init();
    }
  }
</script>

<style scoped>

</style>
